<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>七颗牙学堂</title>
    <link href="../css/common.css" rel="stylesheet" type="text/css">
    <link href="../css/layer.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/common.js"></script>
    <link href="css/index.css" rel="stylesheet" type="text/css">
    <script src="js/share.js"></script>
</head>
<style>
    #app {
        opacity: 0;
    }
    
    .nodata {
        color: #E22F3A;
    }
    
    .nodata1 {
        color: #0287FF;
    }
    
    .smallitem .spancolor {
        color: #FF7B2E !important;
    }
    
    .nojiaopic {
        width: .32rem;
        height: .32rem;
        margin-left: .04rem;
    }
</style>

<body>
    <div id='app'>
        <div v-if="chenload">
            <div class="coursecon">
                <div class="item">
                    <div class="itemtop">
                        <p class="course_name">{{course_dec.course_name}}</p>
                        <div class="course_status chen_yesstatus" v-if='Number(course_dec.status)==1'>已交清</div>
                        <div class="course_status chen_huangstatus" v-else-if='Number(course_dec.status)==3'>换课中</div>
                        <div class="course_status chen_tuistatus" v-else-if='Number(course_dec.status)==4'>已退费</div>
                        <div class="course_status chen_huangstatus" v-else-if='Number(course_dec.status)==2'>退款中</div>
                        <div class="course_status chen_tuistatus" v-else-if='Number(course_dec.status)==5'>已换课</div>
                        <div class="course_status chen_tuistatus" v-else-if='Number(course_dec.status)==6'>缴费失败</div>
                        <div class="course_status chen_yesstatus" v-else>未交清</div>
                    </div>
                    <div class="smallitemall">
                        <div class="smallitem">
                            课程顾问姓名：{{course_dec.consultant_name}}
                        </div>
                        <div class="smallitem smallitemcon">
                            <p>课程价格：折扣价 {{course_dec.discounts}}元</p>
                            <p>已缴费 {{course_dec.account_paid}}元</p>
                        </div>
                        <div class="smallitem" v-if='Number(course_dec.status)<=0'>
                            <!-- Math.floor -->
                            <p>待缴费金额{{(Math.floor((Number(course_dec.discounts)-Number(course_dec.account_paid))* 10000)/10000).toFixed(2)}}元</p>
                            <!-- <p>待缴费金额{{Number(course_dec.discounts)-Number(course_dec.account_paid)}}元</p> -->
                        </div>
                    </div>
                    <div class="butall">
                        <p class="itembut" v-if='Number(course_dec.status)<=0&&Number(payis)==1' @click='wkjqclick'>补款</p>
                    </div>
                </div>


            </div>
            <p class="smallitem1">缴费明细:</p>
            <div class="coursecon mt-20" v-if='Number(paylist.length)>0' v-for='(item,index) in paylist'>
                <div class="item" v-if='Number(item.oto_type)==1'>
                    <div class="smallitemall">
                        <div class="smallitem">
                            缴费时间:{{item.create_time}}
                        </div>
                        <div class="smallitem">
                            缴费类型：线下支付
                        </div>
                        <div class="smallitem nodata" v-if='Number(item.ucp_status)==0'>缴费方式：{{item.title}}</div>
                        <div class="smallitem nodata1" wx:else>缴费方式：{{item.title}}</div>
                        <div class="smallitem">缴费金额：{{item.amount}}元</div>
                    </div>
                </div>
                <div class="item" v-if='Number(item.oto_type)==2'>
                    <div class="smallitemall">
                        <div class="smallitem">
                            创建时间:{{item.create_time}}
                        </div>
                        <div class="smallitem">
                            缴费类型：线上支付
                        </div>
                        <div v-if='Number(item.pay_status)==2' class="smallitem smallitemcon">
                            <p>缴费金额：<span class="spancolor">待支付 {{item.amount}}元</span></p>
                            <p class="itembut" @click='gopay(item)'>去支付</p>
                        </div>
                        <div v-else>
                            <div @click='nopicpay(item)' v-if='Number(item.pay_status)==3' class="smallitem nodata">缴费金额：已过期<img class="nojiaopic" src='img/nojiao.png' /></div>
                            <div v-else class="smallitem">缴费金额：已支付 {{item.amount}}元</div>
                        </div>
                    </div>
                </div>
            </div>

            <p class="smallitem1" v-if='Number(classlist.length)>0'>期次:</p>
            <div class="coursecon mt-20" v-if='Number(classlist.length)>0' v-for='(item,index) in classlist' :key='index'>
                <div class="item">
                    <p class="course_name">{{item.nperName}}</p>
                    <!-- "is_report": 1,//报道状态:1-未报到2-已报到3-不来4-已退费 -->
                    <div class="smallitemall">
                        <div class="smallitem">
                            押金：{{item.money}}<span class="tuiclolor" v-if='Number(item.deposit)==1&&Number(item.money)>0'>(未交)</span><span class="zcclolor" v-if='Number(item.deposit)==2&&Number(item.money)>0'>(已交)</span><span class="redclolor" v-if='Number(item.deposit)==3&&Number(item.money)>0'>(已退还)</span>
                        </div>
                        <div class="smallitem">
                            状态：<span class="tuiclolor" v-if='Number(item.is_report)==1'>未报到</span><span class="zcclolor" v-if='Number(item.is_report)==2'>已报到</span><span class="redclolor" v-if='Number(item.is_report)==3'>不来</span>
                            <span class="redclolor" v-if='Number(item.is_report)==4'>已退费</span>
                        </div>
                        <div class="smallitem">
                            开课时间：{{item.date_start}}
                        </div>
                        <div class="smallitem">
                            结课时间：{{item.date_end}}
                        </div>
                        <!-- <div class="smallitem" v-if='item.deposit&&item.deposit!=""'>
                            开课地点：{{item.deposit}}
                        </div> -->
                    </div>
                    <div class="butall" v-if='Number(item.yj_button)==2&&Number(item.deposit)==1&&Number(item.money)>0'>
                        <p class="itembut" @click='yjclick(item)'>交押金</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="loadmore" v-else>
            <img src="../img/load.gif" alt="">
        </div>

        <div class="showerViplo" v-if="showload">
            <div class="loadmoreshowerVip">
                <img src="../img/load.gif" alt="">
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/vue-router.js"></script>
    <script type="text/javascript" src="../js/layer.js"></script>
    <script type="text/javascript">
        var app2 = new Vue({
            el: '#app ',
            data: {
                payis: 1,
                chenload: false,
                showload: false,
                user_tel: ' ',
                course_dec: ' ',
                id: ' ',
                user_id: ' ',
                page: 0,
                pagedata: [],
                limit: 10,
                course_id: ' ',
                classlist: [],
                paylist: [],
            },
            methods: {
                gopay(item) {
                    localStorage.setItem('payhref', window.location.href);
                    window.location.href = '../ordernew.html?ucp_id=' + item.ucp_id + '&appid=171pk17641pkzone1&ismy=1'
                },
                // 点击缴费失败
                nopicpay(item) {
                    var that = this;
                    that.showload = true;
                    var course_dec = that.course_dec;
                    var dataobj = {
                        area_id: '',
                        ucp_id: item.ucp_id, //	是	int	缴费记录表ID
                        remark: ' ',
                        user_course_id: that.id,
                        pay_method: ' ',
                        amount: Number(course_dec.discounts) - Number(course_dec.account_paid),
                        jietu: ' ',
                        oto_type: 2,
                        wkOrderId: ' ',
                    }
                    sharerequest.postMethod("crmapi/user/againBukuan", dataobj, 1, (res) => {
                        if (Number(res.errcode) == 0) {
                            var data = res.data;
                            var ucp_id = data.ucp_id;
                            localStorage.setItem('payhref', window.location.href);
                            window.location.href = '../ordernew.html?ucp_id=' + ucp_id + '&appid=171pk17641pkzone1&ismy=1'
                        }
                        that.showload = false;
                    })
                },
                yjclick(item) {
                    var that = this;
                    that.showload = true;
                    var dataobj = {
                        class_id: item.class_id, //班级ID
                        user_id: that.user_id, //用户ID
                        class_stu_id: item.id, //报道ID
                    }
                    sharerequest.postMethod("crmapi/Classroom/classOrder", dataobj, 1, (res) => {
                        if (Number(res.errcode) == 0) {
                            var data = res.res;
                            var ucp_id = data.id;
                            localStorage.setItem('payhref', window.location.href);
                            window.location.href = '../ordernew.html?ucp_id=' + ucp_id + '&appid=171pk17641pkzone1&ismy=2'
                        }
                        that.showload = false;
                    })
                },
                // 点击结清尾款
                wkjqclick() {
                    var that = this;
                    var course_dec = that.course_dec;
                    that.showload = true;
                    var data = {
                        remark: ' ',
                        user_course_id: that.id,
                        pay_method: ' ',
                        amount: Number(course_dec.discounts) - Number(course_dec.account_paid),
                        jietu: ' ',
                        oto_type: 2,
                        wkOrderId: ' ',
                        uid: that.user_id,
                    }
                    if (Number(course_dec.cons_type) == 1) {
                        var url = 'crmapi/user/bukuan'
                    } else {
                        var url = 'crmapi/Learn/bukuan'
                    }
                    sharerequest.postMethod(url, data, 1, (res) => {
                        if (Number(res.errcode) == 0) {
                            var data = res.data;
                            var ucp_id = data.ucp_id;
                            localStorage.setItem('payhref', window.location.href);
                            window.location.href = '../ordernew.html?ucp_id=' + ucp_id + ' &appid=171pk17641pkzone1&ismy=1 '
                        } else {
                            layer.open({
                                content: res.msg,
                                skin: 'msg ',
                                time: 2 //1秒后自动关闭
                            });
                        }
                        that.showload = false;
                    })
                },
                courselist() {
                    var that = this;
                    var data = {
                        uc_id: that.id,
                    }
                    sharerequest.postMethod("crmapi/user/userCoursePay", data, 1, (res) => {
                        if (Number(res.errcode) == 0) {
                            var data = res.data;
                            that.course_dec = data.course;
                            var list = data.list;
                            // oto_type
                            for (var i = 0; i < list.length; i++) {
                                if (Number(list[i].oto_type) == 2) {
                                    if (Number(list[i].pay_status) == 2 || Number(list[i].pay_status) == 3) {
                                        that.payis = 2;
                                    }
                                }
                            }
                            that.paylist = list;
                        }
                        that.queryClassStu();
                    })
                },
                queryClassStu() {
                    var that = this;
                    var data = {
                        course_id: that.course_id,
                        user_id: that.user_id,
                    }
                    sharerequest.postMethod("crmapi/Classroom/queryClassStu", data, 1, (res) => {
                        if (Number(res.errcode) == 0) {
                            var datalist = res.data;
                            that.classlist = datalist;
                        }
                        that.chenload = true;
                        that.showload = false;
                    })
                },
                GetQueryString(name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return unescape(r[2]);
                    return null;
                }
            },
            mounted() {
                var that = this;
                that.id = that.GetQueryString('uc_id');
                that.course_id = that.GetQueryString('course_id');
                that.user_id = that.GetQueryString('user_id');
                $('#app ').css('opacity', 1);
                if (localStorage.getItem('erp_phone')) {
                    var user_tel = localStorage.getItem('erp_phone');
                    if ((/^1\d{10}$/.test(user_tel))) {
                        that.user_tel = localStorage.getItem('erp_phone');
                        that.courselist();
                    } else {
                        window.location.href = 'login.html';
                    }
                } else {
                    window.location.href = 'login.html';
                }
            }
        })
    </script>
</body>

</html>